<template>
  <div id="side-bar">
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
          default-active="1-1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse">
<!--          background-color="#545c64"-->
<!--          text-color="#fff"-->
<!--          active-text-color="#ffd04b"-->
          <el-menu-item>
            <el-button @click="changeLabel()" icon="el-icon-d-arrow-right" size="mini" v-if="isCollapse"></el-button>
            <el-button @click="changeLabel()" icon="el-icon-d-arrow-left" size="mini" v-else></el-button>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>讲师管理</span>
            </template>
            <router-link to="/dashboard/teacherlist">
              <el-menu-item index="1-1">讲师列表</el-menu-item>
            </router-link>
            <router-link to="/dashboard/teacheradd">
              <el-menu-item index="1-2">添加讲师</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>部门管理</span>
            </template>
            <router-link to="/dashboard/deptlist">
              <el-menu-item index="2-1">部门列表</el-menu-item>
            </router-link>
            <router-link to="/dashboard/deptupload">
              <el-menu-item index="2-2">列表上传</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-notebook-1"></i>
              <span>课程管理</span>
            </template>
            <router-link to="/dashboard/subjectlist">
              <el-menu-item index="3-1">课程列表</el-menu-item>
            </router-link>
            <router-link to="/dashboard/subjectupload/0">
              <el-menu-item index="3-2">课程发布</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-promotion"></i>
              <span>前台系统</span>
            </template>
            <router-link to="/dashboard/fronted">
              <el-menu-item index="4-1">前台管理</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-ice-cream-round"></i>
              <span>个人资料</span>
            </template>
            <router-link to="/dashboard/selfpass">
              <el-menu-item index="5-1">修改密码</el-menu-item>
            </router-link>
          </el-submenu>
          <el-menu-item index="6">
            <i class="el-icon-odometer"></i>
            <span slot="title">系统监控</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-setting"></i>
            <span slot="title">配置中心</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "SideBar",
    data(){
      return{
        isCollapse: true,
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      changeLabel(){
        this.isCollapse = !this.isCollapse
      }
    }
  }
</script>

<style scoped>
  .el-menu-vertical-demo {
    width: 90px;
    height: 720px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: max-content;
  }
  a{
    text-decoration: none;
  }
</style>
